<template>
	<view class="capital">
		<headTop>
			<uv-navbar title="资金明细" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="tabs">
			<uv-tabs :list="sortList" :lineColor="`url(${iconImg}) 100% 100%`" lineHeight="6"></uv-tabs>
		</view>
		<view class="steps">
			<uv-cell-group>
				<uv-cell v-for="item in capitalList" :key="item.id" :title="item.action" :center="true">
					<template v-slot:label>
						<view>余额: {{ item.rest }}</view>
						<view style="font-size: 28rpx; color: #999">时间: {{ item.created_at }}</view>
					</template>
					<template v-slot:value>
						<text :style="{ color: getTheme.themeColor }">-{{ item.amount }}</text>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>
		<view v-if="isBottom">
			<uv-divider text="已经到底了"></uv-divider>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { userApi } from "@/api/index";
	import headTop from "@/components/headTop/index.vue";
	import { getIcon } from "@/utils/index";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();

	const { iconImg } = getIcon();
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	/* ---------------------------------------------------tabs分类数据------------------------------------------------- */
	const sortList = ref([{ name: "全部" }, { name: "待付款" }, { name: "待发货" }, { name: "处理中" }, { name: "已完成" }, { name: "退款中" }, { name: "已退款" }]);

	/* ---------------------------------------------------获取订单数据------------------------------------------------- */
	const params = ref({ page: 1, limit: 15, type: "balance", action: "订单退款" });
	const capitalList = ref<any>([]);
	const isBottom = ref(false);
	const getList = async () => {
		try {
			const res = await userApi.getcapitalflow(params.value);
			if (params.value.limit > res.data.list.length) {
				isBottom.value = true;
			}
			capitalList.value = [...capitalList.value, ...res.data.list];
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	/* ---------------------------------------------------下拉加载------------------------------------------------- */
	import { onReachBottom } from "@dcloudio/uni-app";
	onReachBottom(() => {
		if (isBottom.value) return;
		params.value.page++;
		getList();
	});
</script>

<style lang="scss">
	.capital {
		.steps {
			margin-top: 2vw;

			.uv-cell-group {
				background-color: rgba(255, 255, 255, 0.6) !important;
				border-radius: 2vw !important;
			}
		}
	}
</style>